/**
数据操作的工具栏组件

属性：
  importUrl: String,导入按钮的Url
  downloadUrl: String,下载按钮的Url
  deleteBtnDisabled: Boolean,删除按钮是否有效，默认true：无效
  operating：Array["new", "delete", "download", "import", "query", "save"]
  以下时各按钮的点击事件：
    newClick:
    saveClick:
    deleteClick:
    queryClick:
    downloadClick
 */
<template>
  <div class="table-header">
    <div class="header-left">
      <el-button
        icon="el-icon-search"
        v-if="showBtn('query')"
        @click="queryClick"
        >查询</el-button
      >
      <el-divider
        v-if="showBtn('new') && showBtn('query')"
        direction="vertical"
      ></el-divider>
      <el-button
        icon="el-icon-circle-plus"
        v-if="showBtn('new')"
        @click="newClick"
        type="success"
        style="margin-right:10px;"
        >新增</el-button
      >
      <el-popconfirm
        title="确定删除吗？"
        @confirm="deleteClick"
        v-if="showBtn('delete')"
        :disabled="deleteBtnDisabled"
      >
        <el-button
          slot="reference"
          type="danger"
          icon="el-icon-delete"
          :disabled="deleteBtnDisabled"
          >删除</el-button
        >
      </el-popconfirm>
      <el-button
        icon="el-icon-success"
        type="primary"
        v-if="showBtn('save')"
        @click="saveClick"
        style="margin-right:10px;"
        >保存</el-button
      >
    </div>
    <div class="header-right">
      <el-button
        icon="el-icon-download"
        v-if="showBtn('download')"
        @click="downloadOpen"
        >下载模板</el-button
      >
      <el-popover
        placement="bottom"
        width="360"
        trigger="click"
        v-if="showBtn('import')"
        style="margin-left:10px;"
      >
        <el-upload
          accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          drag
          :action="importUrl"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip" style="color:red;">
            注意：只能上传Excel文件，且不超过50M
          </div>
        </el-upload>
        <el-button icon="el-icon-upload" slot="reference">导入数据</el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    importUrl: String,
    downloadUrl: String,
    deleteBtnDisabled: { type: Boolean, default: true },
    operating: {
      type: [Array, Boolean],
      validator: function(arr) {
        const list = ["new", "delete", "download", "import", "query", "save"];
        for (let i = 0; i < arr.length; i++) {
          if (list.findIndex((item) => item == arr[i]) < 0) {
            console.error(
              '/src/pages/main/components/grid/Grid.vue 属性检查失败，属性operating的值只能是false或数组["new", "delete", "download", "import","query","save"]'
            );
            return false;
          }
        }
        if (arr == true) {
          console.error(
            '/src/pages/main/components/grid/Grid.vue Grid.vue属性检查失败，属性operating的值只能是false或数组["new", "delete", "download", "import","query","save"]'
          );
          return false;
        }
        return true;
      },
      default: () => ["new", "delete", "query", "save"],
    },
    newClick: {
      type: Function,
      default: () => {
        console.log("new button click");
      },
    },
    saveClick: {
      type: Function,
      default: () => {
        console.log("save button click");
      },
    },
    deleteClick: {
      type: Function,
      default: () => {
        console.log("delete button click");
      },
    },
    queryClick: {
      type: Function,
      default: () => {
        console.log("query button click");
      },
    },
    downloadClick: {
      type: Function,
    },
  },
  methods: {
    showBtn(btn) {
      if (typeof this.operating != "undefined") {
        if (this.operating != false) {
          if (Array.isArray(this.operating)) {
            if (this.operating.findIndex((item) => item == btn) >= 0) {
              return true;
            }
          }
        }
      }
      return false;
    },
    downloadOpen() {
      if (this.downloadClick) {
        this.downloadClick(this.downloadUrl);
      } else {
        window.open(this.downloadUrl);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  height: 48px;
  background-color: #f2f2f2;
  line-height: 48px;
  padding: 0px 5px 0px 5px;
  display: flex;
  .header-left {
    width: 100%;
  }
  .header-right {
    width: 245px;
    flex: 0 0 245px;
    justify-content: flex-end;
    text-align: right;
    display: inline-block;
  }
}
</style>
